<template>
  <div id="changePassword">
    <div class="homeTitle">修改密码</div>
    <div class="changebox">
      <div class="centerbox">
        <p><span class="left">登录账号：</span> <span>{{account}}</span></p>
        <p><span class="left">姓名：</span> <span>{{name}}</span></p>
        <!-- <p><span class="left"><span class="red">* </span>当前密码：</span> <el-input size="small" type='password' v-model="currentPassword" placeholder="请输入当前使用的密码"></el-input></p> -->
        <p><span class="left"><span class="red">* </span>新密码：</span> <el-input size="small" type='password' v-model="newPassword" placeholder="请输入8-20位密码，要求必须包含大写字母、小写字母以及数字"></el-input></p>
        <p><span class="left"><span class="red">* </span>确认新密码：</span> <el-input size="small" type='password' v-model="rePassword"  placeholder="输入时请与新密码保持完全一致"></el-input></p>
        <p><span class="left"></span> <span class="red">注意事项：新密码不可设置为近1年内使用过的密码，系统每3个月将强制更换密码</span></p>
      </div>
    </div>
    <div class="btn">
      <el-button size="small" type='primary' @click="submit">提交</el-button>
      <el-button size="small" type='primary' @click="$router.go(-1)">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'changePassword',
  data () {
    return {
      account: '',
      name: '',
      currentPassword: '',
      newPassword: '',
      rePassword: ''
    };
  },
  created () {
    let user = JSON.parse(sessionStorage.getItem('user'));
    this.account = user.jobNum;
    this.name = user.name;
  },
  methods: {
    submit () {
      let reg = /^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])).{8,20}$/;
      // if (!this.currentPassword) {
      //   this.$message({message: '请输入当前密码',type: 'warning'});
      // } else
      if (!this.newPassword) {
        this.$message({message: '请输入新密码',type: 'warning'});
      } else if(!reg.test(this.newPassword)) {
        this.$message({message: '请输入8-20新位密码，要求必须包含大写字母、小写字母以及数字',type: 'warning'});
      } else if(!this.rePassword) {
        this.$message({message: '请输入确认密码',type: 'warning'});
      } else if(!(this.newPassword == this.rePassword)) {
        this.$message({message: '两次输入的密码不一致',type: 'warning'});
      } else {
        this.axios.post('user/updatePwd',{newPwd: this.rePassword})
          .then(({data})=> {
            if (data.code == 200) {
              this.$message({message: '密码修改成功',type: 'success'});
              this.$router.push({name: 'work'});
            }
          })
      }
    }
  }
};
</script>

<style lang="scss">
  #changePassword {
    .changebox {
      padding: 40px;
      background-color: rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      .centerbox {
        // background: pink;
        min-width: 800px;
        width: 60%;
        p{
          margin: 20px 0;
          display: flex;
          >.left{
          width: 17%;
          text-align: right;
        }
        .red {
          color: red;
        }
        .el-input {
          display: inline-block;
          width: 83%;
        }
      }
    }
    }
    .btn {
      text-align: center;
      margin-top: 20px;
      .el-button {
        margin-right: 20px;
      }
    }
  }
</style>
